<template>
  <div class="user-info">
    <div class="panel">
      <span class="label">个人中心</span>
      <el-button :loading="loading" type="primary" @click="submitForm">保存</el-button>
    </div>
    <div class="main">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="65px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="name" placeholder="请输入用户名">
          <el-input class="w240" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input class="w240" type="password" v-model="ruleForm.password" placeholder="留空表示不修改密码"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <div class="avatar-select">
            <div class="block" @click="setAvatar(idx)" v-for="(item, idx) in avatarList" :key="idx">
              <el-avatar size="medium" :src="item"></el-avatar>
              <i class="check el-icon-check" v-show="idx == currentAvatar"></i>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn">
      <el-button @click.stop="logout">退出登录</el-button>
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { CommonEnum } from '@/enums'
export default {
  setup() {
    const store = useStore()

    const logout = () => {
      store.dispatch('_postLogout')
    }
    return {
      logout
    }
  },
  data() {
    return {
      loading: false,
      avatarList: CommonEnum.AVATAR,
      currentAvatar: 0,
      avatar: '',
      ruleForm: {
        name: '',
        password: '',
        avatar: ''
      },
      rules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  },
  watch: {
    userInfo: {
      handler(v) {
        if (v.avatar) {
          this.avatar = v.avatar
          let index = this.avatarList.findIndex(item => {
            return item == v.avatar
          })
          if (index != -1) {
            this.currentAvatar = index
          } else {
            this.currentAvatar = 0
          }
        } else {
          this.avatar = CommonEnum.AVATAR[0]
          this.currentAvatar = 0
        }
      },
      immediate: true
    }
  },

  methods: {
    setAvatar(idx) {
      this.currentAvatar = idx
      this.avatar = this.avatarList[idx]
    },
    submitForm() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.loading = true
          let params = {
            username: this.ruleForm.name,
            id: this.userInfo.id,
            avatar: this.avatar
          }
          if (this.ruleForm.password) {
            params.password = this.ruleForm.password
          }

          let res = await this.$store.dispatch('_postEditUser', params)
          this.loading = false
          if (res) {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.$store.dispatch('_postUserDetail', { type: 'edit' })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  mounted() {
    this.ruleForm.name = this.userInfo.username
  }
}
</script>

<style lang="scss" >
.user-info {
  height: 100%;
  .el-form-item__error {
    left: 8px;
  }
  .avatar-select {
    // border: 1px solid #dcdfe6;
    // border-radius: 4px;
    // background: #fff;
    margin-left: 9px;
    width: 240px;
    display: flex;
    flex-wrap: wrap;
    .block {
      padding: 4px;
      position: relative;
      cursor: pointer;
      .check {
        position: absolute;
        left: 4px;
        top: 4px;
        color: #13f513;
        display: block;
        background: rgba(0, 0, 0, 0.5);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        line-height: 36px;
        font-weight: 600;
      }
    }
  }
  .panel {
    background: #fff;
    margin: 0 0 10px 0;
    padding: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .label {
      text-align: left;
      font-size: 18px;
      background-color: #fff;
    }
  }
  .main {
    padding: 20px;

    height: calc(100% - 155px);
    background-color: #fff;
  }
  .btn {
    text-align: right;
    margin-top: 10px;
    padding: 0 10px;
  }
}
</style>